<template>
    <!-- <section id="page">
        <Header class="main-header" />

        <div class="main-container">
            <RouterView />
        </div>
    </section> -->
    <div class="app">
        <AppHeader class="app__header" />
        <AppAside
            class="app__aside"
            :nav-list="navList"
        />
        <RouterView class="app__main" />
    </div>
</template>

<script>
// import Header from './common/Header';
// import 'github-markdown-css/github-markdown.css';
import AppHeader from './app-header';
import AppAside from './app-aside';

export default {
    name: 'App',

    components: {
        // Header,
        AppHeader,
        AppAside,
    },

    data() {
        return {
            navList: [
                {
                    children: [
                        {
                            title: '精选推荐',
                            icon: 'home',
                            path: '/home',
                        },
                        {
                            title: '我的工作台',
                            icon: 'form',
                            path: '/apply',
                        },
                        {
                            title: '多人协作',
                            icon: 'form',
                            path: '/apply-1',
                        },
                        {
                            title: '创建设计',
                            icon: 'form',
                            path: '/apply-2',
                        },
                    ],
                },
                {
                    title: '创意设计',
                    children: [
                        {
                            title: '模板中心',
                            icon: 'form',
                            path: '/icon',
                        },
                        {
                            title: '设计工具',
                            icon: 'form',
                            path: '/poster',
                        },
                    ],
                },
                {
                    title: '扩展功能',
                    children: [
                        {
                            title: '营销动态',
                            icon: 'form',
                            path: '/crop',
                        },
                        {
                            title: '设计素材',
                            icon: 'form',
                            path: '/basemap-1',
                        },
                        {
                            title: '屏幕营销',
                            icon: 'form',
                            path: '/basemap-2',
                        },
                    ],
                },
            ],
        };
    },

};
</script>

<style lang="scss">
// body {
//     margin: 0;
//     padding: 0;
// }

// #page {
//     margin: 0 auto;
//     max-width: 1600px;
//     min-height: 100%;

//     background-color: #fff;
// }

// .main-header {
//     overflow-x: auto;
// }

// .main-container {
//     margin-top: 80px;
//     padding: 0 30px;
// }

.app {
    --header-height: 64px;
    --main-height: calc(100vh - var(--header-height));

    display: grid;

    min-height: 100vh;

    grid-template-areas:
        "header header"
        "aside main";
    grid-template-columns: 240px 1fr;
    grid-template-rows: var(--header-height) var(--main-height);

    &__header {
        grid-area: header;
    }

    &__aside {
        grid-area: aside;
    }

    &__main {
        position: relative;

        margin: 0 auto;
        padding: 24px 32px;
        width: 100%;
        min-width: 1040px;
        max-width: 1616px;

        background: white;
    }
}

</style>
